<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">编辑材料说明书的成分</h4>
</div>
<style>
    #dvThead {
        background-color: #f0f0f0;
    }
    #dvThead .table {
        margin-bottom: 0;
    }
    #dvThead .table thead{
        background-color: #f0f0f0;
        text-align: center;
    }
    #dvThead .table thead th{
        text-align: center;
    }
    #dvTbody {
        max-height: 600px;
        overflow: auto;
    }
    #dvTbody .table tbody td{
        text-align: center;
    }
</style>
<form id="composition-form" action="/xqc/products/material-supplier-ajax" method="post" onsubmit="return checkAddOutCompositionForm()">
    <div style="max-height: 550px;overflow-y:scroll">
        <div class="modal-body">
            <div class="box-body">
                <h4>基本信息</h4>
                <div class="box-body table-responsive no-padding">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>供应商简称</th>
                            <th>供应商材料编码</th>
                            <th>材料编码</th>
                            <th>材料名称</th>
                            <th>应用大类</th>
                            <th>应用小类</th>
                            <th>材料大类</th>
                            <th>材料中类</th>
                            <th>材料小类</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{ $psm->supplier->short_name ?? '' }}</td>
                            <td>{{ $psm->supplier_material_no }}</td>
                            <td>{{ $psm->material->material_code ?? '' }}</td>
                            <td>{{ $psm->material->title ?? '' }}</td>
                            <td>{{ $psm->material->material_application_max->title ?? '' }}</td>
                            <td>{{ $psm->material->material_application_min->title ?? '' }}</td>
                            <td>{{ $psm->material->material_classify_max->title ?? '' }}</td>
                            <td>{{ $psm->material->material_classify_mid->title ?? '' }}</td>
                            <td>{{ $psm->material->material_classify_min->title ?? '' }}</td>
                            <td>{{ \App\Models\Product\ProductSupplierM::$_auditStatus[$psm->audit_status] }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="box-body">
                <h4>编辑</h4>
                <div class="row">
                    <div class='form-inline margin'>
                        <div id="dvThead">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th style="width: 45%">成分占比</th>
                                    <th style="width: 45%">成分类型</th>
                                    <th style="width: 10%">操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div id="dvTbody">
                            <table class="table table-hover" id="table-detail">
                                <tbody>
                                @if(!empty($psm->composition))
                                    @foreach($psm->composition as $key => $_composition)
                                        <tr>
                                            <td style="width:45%">
                                                <input style="width:95%" type="text" class="form-control"
                                                       name="param[composition][{{ $key }}][ratio]"
                                                       value="{{ $_composition['ratio'] }}" required>{{ '%' }}
                                            </td>
                                            <td style="width:45%">
                                                <select style="width:95%" name="param[composition][{{ $key }}][type]" class="gird-composition-select" required>
                                                    {{ getOptions(\App\Models\Product\ProductSupplierM::$_composition,$_composition['type']) }}
                                                </select>
                                            </td>
                                            <td style="width:10%; vertical-align: middle;">
                                                <a class="btn btn-sm btn-danger table-detail-remove"><i class="fa fa-trash"></i> 删除</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                        </div>
                        <div style="display: block; margin-top: 20px; text-align: center;">
                            <button type="button" class="btn btn-sm btn-info" id="add-table-detail"><i class="fa fa-plus"></i>&nbsp;&nbsp;新增</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        {{ csrf_field() }}
        <input type="hidden" name="param[id]" value="{{ $id }}">
        <input type="hidden" name="action" value="doUpdateComposition">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>
<template id="table-detail-tpl">
    <tr>
        <td style="width:45%">
            <input style="width:95%" type="text" class="form-control"
                   placeholder="成分占比" name="param[composition][__index__][ratio]" required>
            {{ '%' }}
        </td>
        <td style="width:45%">
            <select style="width:95%" name="param[composition][__index__][type]" class="gird-composition-select" required>
                {{ getOptions(\App\Models\Product\ProductSupplierM::$_composition) }}
            </select>
        </td>
        <td style="width:10%; vertical-align: middle;">
            <a class="btn btn-sm btn-danger table-detail-remove"><i class="fa fa-trash"></i> 删除</a>
        </td>
    </tr>
</template>

<script language="JavaScript" type="text/javascript">
    function checkAddOutCompositionForm(){
        if($(".gird-composition-select").length == 0){
            swal('请添加成分类型', '', 'error');
            return false;
        }else{
            return true;
        }
    }
    $(function () {
        $(".gird-composition-select").select2({"allowClear":true, "placeholder":"请选择成分类型","width": '100%'});
        //添加
        $('#add-table-detail').click(function (event) {
            $('#table-detail tbody').append($('#table-detail-tpl').html().replace(/__index__/g, $('#table-detail tr').length));
            $(".gird-composition-select").select2({"allowClear":true, "placeholder":"请选择成分类型","width": '100%'});
        });

        //删除
        $('#table-detail').on('click', '.table-detail-remove', function(event) {
            $(event.target).closest('tr').remove();
        });

        $("#composition-form").ajaxForm(function (data) {
            if (typeof data === 'object') {
                if (data.status) {
                    $("#compositionModal").modal('hide');
                    $(".modal-backdrop").remove();
                    $('body').removeClass('modal-open');
                    toastr.success('提交成功 !');
                    $.pjax.reload('#pjax-container');
                } else {
                    swal(data.message, '', 'error');
                }
            }
        });
    });
</script>
